<template>
  <view class="map">
    <map style="width: 750rpx; height: 421rpx" id="map" :longitude="longitude" :latitude="latitude" :scale="scale"
      :markers="markers" @regionchange="regionchange" show-location>
      <view class="image-container">
        <image :src="`${baseImgUrl}dingwei-map.png`" mode="scaleToFill" class="img-style" />
      </view>
      <image @click="moveLocation" class="img-location" :src="`${baseImgUrl}dingwei.png`" mode="scaleToFill" />
    </map>
    <!-- <view class="map-select">
      <button size="mini" @click="getLocation" type="primary">获取位置</button>
    </view> -->
    <view class="result-wrapper">
      <!-- 搜索出来之后给选中的位置添加一个 markers, 先清空当前的 markers -->
      <u--input placeholder="请输入" :customStyle="{
        background: '#F8FAFF',
        border: '1rpx solid #EAEEF6',
        borderRadius: '16rpx'
      }" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #979797" @change="onInputChange"></u--input>
      <scroll-view :scroll-y="true" class="scroll-wrapper">
        <view class="scroll-item" v-for="(item, index) in locationArray" :key="index" @click="onSelectLocation(item)">
          <view class="left-wrapper">
            <uni-icons type="location" size="30"></uni-icons>
            <view class="location-name">{{ item.fNames }}</view>
          </view>
          <view class="right-wrapper">{{item.distance.toFixed(2)}}m</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import {
    houseMapPoints
  } from '../api/api'
  import {
    getLocation,
    navBack
  } from '../utils/util'

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        mapCtx: null,
        longitude: 0,
        latitude: 0,
        scale: 18,
        locationArray: [],
        markers: [],
        centerLocation: {},
      }
    },
    onLoad() {
      this.mapCtx = uni.createMapContext('map')
      this.initPage()
    },
    methods: {
      async initPage() {
        uni.showLoading({
          title: '正在获取当前位置信息，请稍等！'
        })
        let location = await getLocation({
          type: 'gcj02',
        })
        uni.hideLoading()
        this.latitude = location.latitude
        this.longitude = location.longitude
        let params = {
          houseLng: location.longitude,
          houseLat: location.latitude
        }
        houseMapPoints(params)
          .then((res) => {
            this.locationArray = res.result
          })
      },
      getLocation() {
        this.mapCtx.getCenterLocation({
          success(res) {
            console.log(res)
            setTimeout(() => {
              this.mapCtx.moveToLocation({
                longitude: res.longitude,
                latitude: res.latitude,
              })
            }, 200)
          },
        })
      },
      moveLocation() {
        uni.getLocation({
          type: 'gcj02',
          success: ({
            latitude,
            longitude
          }) => {
            // 在这里做一下优化，如果大于18 怎不用再对地图进行缩放
            if (this.scale === 18) {
              this.scale = 17.9
            } else {
              this.scale = 18
            }
            setTimeout(() => {
              this.mapCtx.moveToLocation({
                latitude,
                longitude,
              })
            }, 180)
          },
          fail: (error) => {
            console.log(error)
          },
        })
      },
      regionchange(e) {
        if (e.type === 'end') {
          // 获取屏幕中心点的经纬度
          this.mapCtx.getCenterLocation({
            success(e) {
              console.log(e)
              this.centerLocation = e
            },
          })
        }
      },
      onSelectLocation(item) {
        uni.$emit('map-selected', item)
        navBack()
        // const {
        //   latitude,
        //   longitude
        // } = item
        // // 先清空
        // this.markers = []
        // this.markers.push({
        //   id: Math.random(),
        //   latitude,
        //   longitude,
        //   width: 20,
        //   height: 20,
        //   iconPath: '../static/icons/locate.png',
        //   callout: {
        //     content: '你好呀',
        //     color: '#ffffff',
        //     fontSize: 14,
        //     borderRadius: 4,
        //     bgColor: '#00c16f',
        //     display: 'ALWAYS',
        //     borderColor: '#fff',
        //     borderWidth: 0,
        //     padding: 2,
        //     textAlign: 'center',
        //   },
        // })
        // this.mapCtx.moveToLocation({
        //   latitude,
        //   longitude,
        // })
      },
      onInputChange(val) {
        console.log(val)
        let params = {
          likeName: val ? val.trim() : val,
          houseLng: this.longitude,
          houseLat: this.latitude
        }
        houseMapPoints(params)
          .then((res) => {
            this.locationArray = res.result
          })
      }
    }
  }
</script>

<style lang="scss">
  page,
  .map {
    width: 100%;
    height: 100%;
  }

  .map-select,
  #map {
    width: 100%;
    height: 50%;
    position: relative;
  }

  .image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 66rpx;
    height: 74rpx;

    .img-style {
      width: 100%;
      height: 100%;
    }
  }

  .img-location {
    position: absolute;
    left: 20rpx;
    bottom: 80rpx;
    width: 40rpx;
    height: 40rpx;
  }

  .result-wrapper {
    width: 750rpx;
    height: calc(100vh - 421rpx);
    background: #ffffff;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    padding: 30rpx;


    .search-input {
      margin-bottom: 11px;
    }

    .scroll-wrapper {
      height: calc(100% - 44px);

      .scroll-item {
        height: 102rpx;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #f5f5f5;
        justify-content: space-between;

        .left-wrapper {
          display: flex;
          align-items: center;

          .location-name {
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }

        .right-wrapper {
          font-weight: 500;
          font-size: 26rpx;
          color: #aaaaaa;
        }
      }
    }
  }
</style>